<template>
  <div>
    <van-dialog
      :value="value"
      @input="$emit('input',$event)"
      :show-confirm-button="false"
      close-on-click-overlay
      @close="isOneLevel=true"
    >
      <van-cell-group v-if="isOneLevel">
        <van-cell icon="location-o" title="不感兴趣" @click="articleDislike()" />
        <van-cell icon="location-o" title="反馈垃圾内容" is-link @click="isOneLevel=false" />
        <van-cell icon="location-o" title="拉黑作者" />
      </van-cell-group>
      <van-cell-group v-else>
        <van-cell icon="arrow-left" @click="isOneLevel=true" />
        <van-cell
          :title="item.title"
          icon="location-o"
          v-for="item in reportsList"
          :key="item.value"
          @click="articleReport(item.value)"
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import { apiArticleDislike, apiArticleReport } from '@/api/article.js'
export default {
  name: 'com-moreaction',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    articleID: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      isOneLevel: true,
      reportsList: [
        { title: '其他问题', value: 0 },
        { title: '标题夸张', value: 1 },
        { title: '低俗色情', value: 2 },
        { title: '错别字多', value: 3 },
        { title: '旧闻重复', value: 4 },
        { title: '广告软文', value: 5 },
        { title: '内容不实', value: 6 },
        { title: '涉嫌违法犯罪', value: 7 },
        { title: '侵权', value: 8 }
      ]
    }
  },
  methods: {
    async articleReport (type) {
      try {
        const obj = { articleID: this.articleID, type }
        await apiArticleReport(obj)
      } catch (err) {
        if (err.response.status === 409) {
          return this.$toast.fail('文章已经举报过了')
        } else {
          return this.$toast.fail('文章举报失败')
        }
      }
      this.$toast.success('举报成功！')
      this.$emit('input', false)
    },
    async articleDislike () {
      await apiArticleDislike(this.articleID)
      this.$toast.success('处理成功！')
      this.$emit('input', false)
      this.$emit('dislikeSuccess')
    }
  }
}
</script>

<style lang="less" scope>
</style>
